<template>
    <div class="forget">
        <van-nav-bar
                :fixed="TopShow"
                title="立即注册"
                left-arrow
                @click-left="onClickLeft"
        />
        <div :style="{marginTop: '86px'}">
            <div style="width: 48px;height: 48px;margin: 0 auto">
                <img src="../../static/login.png"
                     style="height: 48px;width: 48px"
                />
            </div>
            <h3 class="header_tit_txt" >注册账号</h3>
                <van-cell-group>
                    <van-field
                            v-model="username"
                            label="手机号"
                            placeholder="请输入手机号"
                    />
                    <!--error-message="手机号格式错误"-->
                    <van-field
                            v-model="password"
                            label="密   码"
                            type="password"
                            placeholder="请输入密码"
                    />
                    <van-field
                            v-model="code"
                            center
                            clearable
                            label="验证码"
                            placeholder="请输入短信验证码">
                        <van-button slot="button" size="small" type="primary" @click="UserCode" v-show="CodeShow">
                            发送验证码
                        </van-button>
                        <van-button disabled type="primary" slot="button" size="small" v-show="!CodeShow">重新发送({{date}})S</van-button>
                    </van-field>
                </van-cell-group>
                <div :style="{padding:'10px',marginTop:'10px'}">
                    <van-button size="large" @click="setData">立即注册</van-button>
                </div>
        </div>
    </div>
</template>

<script>
    import {VerificationCode,UserRegister} from '../api/data'
    import Vue from 'vue'
    import { Toast } from 'vant';
    Vue.use(Toast);
  export default {
    data(){
      return{
          timer:null,
          date:'',
          TopShow:true,
          CodeShow:true,
          username:'',
          password:'',
          code:''
      }
    },
    methods:{
        onClickLeft(){
            this.$router.back()
        },
      //验证用户输入的合法性
        setData(){
            const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
            let username = this.username;
            let password = this.password;
            let code = this.code;
            if (reg.test(username)) {
                if (password.length<6) {
                     Toast('密码不能小于6位！')
                        return;
            }
            if(code.length<6){
                Toast('请输入正确的验证码！')
                return
            }
            UserRegister(this.username,this.password,this.code).then(res=>{
                console.log(res.data)
               if (res.data.msg == '验证码已经过期,请先获取验证码!') {
                   Toast('验证码已经过期,请先获取验证码!')
                   return
               }
               if(res.data.msg == '验证码不正确!'){
                   Toast('验证码不正确!')
                   return
               }
               if (res.data.msg == '注册并激活成功,请登录!') {
                   Toast('注册并激活成功,请登录!')
                   this.$router.push({path:`/login`})
               }
               if (res.data.msg == '此账号已存在!') {
                   Toast('此账号已存在!请登录！')
                   this.$router.push({path:`/login`})
               }
            })
        } else {
            Toast('请输入正确的手机号！')
         }
        },
        UserCode(){
            let username = this.username
            const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
            if (reg.test(username)){
                VerificationCode(username).then(res=>{
                    console.log(res.data)
                    if (res.data.msg =='验证码发送过多,请明天再试!') {
                        Toast('验证码发送过多,请明天再试!')
                        return
                    }
                    this.CodeShow=false
                    const TIME_COUNT = 60;
                    if (!this.timer) {
                        this.date = TIME_COUNT;
                        this.timer = setInterval(() => {
                            if (this.date > 0 && this.date <= TIME_COUNT) {
                                this.date--;
                            } else {
                                this.CodeShow=true
                                this.show = true;
                                clearInterval(this.timer);
                                this.timer = null;
                            }
                        }, 1000)
                    }
                    Toast('验证码发送成功，有效期30分钟！')
                })
            }else{
                Toast('请输入正确的手机号！')
            }
        }
    }
  }
</script>

<style scoped>
    .header_tit_txt{
        text-align: center;
        padding: 20px 0px;
    }
    .model{
        width: 49px;
        height: 48px;
        margin: 0 auto;
        display: block;
    }
</style>
